<template>
    <div class="container_1">
        <h2>子组件 1</h2>
        <p>子组件接收父组件的信息：{{ props.message }}</p>
        <input v-model="newMessage" placeholder="输入新消息" />
        <button @click="$emit('updateMessage', newMessage)">直接发送</button>
        <button @click="sendMessage">发送消息给父组件</button>
    </div>
</template>

<script setup>
import { ref } from 'vue';

//defineProps(['message']):
//目的：定义子组件可以接收的属性（props）。
const props = defineProps(['message']);

// defineEmits(['updateMessage']):
//目的：定义子组件可以发出的事件。
const emit = defineEmits(['updateMessage']);
const newMessage = ref('');

const sendMessage = () => {
    emit('updateMessage', newMessage.value);
    newMessage.value = ''; // 清空输入框
};
</script>

<style scoped>
h2 {
    color: #8e44ad;
}
.container_1 {
    text-align: center;
    margin-top: 50px;
    background-color: rgb(236, 236, 236);
    border-radius: 15px;
    padding: 10px;
    margin: 20px;
}
</style>